<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Navbar</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">

		<link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="css/global.css" media="all">
		<link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
	</head>
	<body>
		<div style="margin: 15px;">
			<blockquote class="layui-elem-quote">
				<h1>Navbar ç»ä»¶ (å¨ææ¸²æ)</h1></blockquote>
			<fieldset class="layui-elem-field">
				<legend>æ¼ç¤º</legend>
				<div class="layui-field-box">
					<div id="nav" lay-filter="demo"></div>
					<pre class="layui-code">
						//ç¤ºä¾ä»£ç 
						//html
						&lt;div id=&quot;nav&quot; lay-filter=&quot;demo&quot;&gt;&lt;/div&gt;
						//js
						layui.config({
						    base: 'js/'
						}).use('navbar', function() {
						    var navbar = layui.navbar();
						    navbar.set({
						        elem: '#nav',
						        url: 'datas/nav.json'
						    });
						    navbar.render();
						    navbar.on('click(demo)', function(data) {
						        layui.layer.msg(data.field.href);
						    });		
						});
						</pre>
				</div>
			</fieldset>
			<fieldset class="layui-elem-field">
				<legend>åæ°</legend>
				<div class="layui-field-box">
					<table class="layui-table">
						<thead>
							<tr>
								<th>å±æ§åç§°</th>
								<th>ç±»å</th>
								<th>é»è®¤å¼</th>
								<th>æè¿°</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td style="text-align: center;">elem</td>
								<td style="text-align: center;">string/object</td>
								<td style="text-align: center;">undefined</td>
								<td>
									<p>å­å¨ç»ä»¶çå®¹å¨ï¼æ¯æç±»åãIDå åJqueryå¯¹è±¡.</p>
									<p>ä¸¾ä¸ªæ å­ï¼</p>
									<p>1. elem:'.nav'</p>
									<p>2. elem:'#nav'</p>
									<p>3. elem:$('.nav')</p>
								</td>
							</tr>
							<tr>
								<td style="text-align: center;">data</td>
								<td style="text-align: center;">object</td>
								<td style="text-align: center;">undefined</td>
								<td>
									<p>æä¾ç»ç»ä»¶çæ°æ®åè¡¨ï¼è¯·ä¸¥æ ¼æç§è§å®æ ¼å¼æä¾ã</p>
								</td>
							</tr>
							<tr>
								<td style="text-align: center;">url</td>
								<td style="text-align: center;">string</td>
								<td style="text-align: center;">undefined</td>
								<td>
									<p>æä¾æ°æ®æºè¿ç¨çURL,å½ååªæ¯æåæ­¥çæ¹å¼è¯»åæ°æ®</p>
								</td>
							</tr>
							<tr>
								<td style="text-align: center;">type</td>
								<td style="text-align: center;">string</td>
								<td style="text-align: center;">GET</td>
								<td>
									<p>è¯·æ±çæ¹å¼ï¼å¯éåæ°ï¼GETãPOST</p>
								</td>
							</tr>
							<tr>
								<td style="text-align: center;">cached</td>
								<td style="text-align: center;">bool</td>
								<td style="text-align: center;">false</td>
								<td>
									<p>æ¯å¦å¯ç¨ç¼å­ï¼å¦æè®¾ç½®ä¸ºtrueï¼åå°åå§åæ°æ®çæ°æ®æ·»å è³ç¼å­</p>
								</td>
							</tr>
							<tr>
								<td style="text-align: center;">spreadOne</td>
								<td style="text-align: center;">bool</td>
								<td style="text-align: center;">false</td>
								<td>
									<p>è®¾ç½®æ¯å¦åªå±å¼ä¸ä¸ªäºçº§èå</p>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</fieldset>
			<fieldset class="layui-elem-field" id="event">
				<legend>Event äºä»¶</legend>
				<div class="layui-field-box">
					<p>è¯­æ³ï¼navbar.on('event(è¿æ»¤å¨å¼)', callback);</p>
					<table class="layui-table">
						<thead>
							<tr>
								<th>äºä»¶</th>
								<th>æè¿°</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>click</td>
								<td>Navbarç¹å»äºä»¶,åç´ è¢«ç¹å»åä¼è§¦å</td>
							</tr>
						</tbody>
					</table>
					<p>ä¸¾ä¸ªæ å­ï¼</p>
					<p>
						<pre class="layui-code">
						navbar.on('click(side)', function(data) {
						    //Do something...
						    //dataåæ°è¯´æ
						    //åå«ä¸¤ä¸ªå±æ§ï¼data.elem å data.field
						    //data.elem æ¯ç¹å»çaæ ç­¾domå¯¹è±¡
						    //data.field åå«ä¸ä¸ªå±æ§
						    //1ãdata.field.href  è®¾ç½®çè¿æ¥å°å
						    //2ãdata.field.icon  è®¾ç½®çå¾æ 
						    //3ãdata.field.title è®¾ç½®çæ é¢
					     console.log(data.elem);
					     console.log(data.field.title);
					     console.log(data.field.icon);
					     console.log(data.field.href);
						});
						</pre>
					</p>
				</div>
			</fieldset>
			<fieldset class="layui-elem-field">
				<legend>æ¹æ³</legend>
				<div class="layui-field-box">
					<table class="layui-table">
						<thead>
							<tr>
								<th>åç§°</th>
								<th>åæ°è¯´æ</th>
								<th>æè¿°</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td style="text-align: center;">set</td>
								<td style="text-align: center;">
									<p>åæ°åï¼options</p>
									<p>ç±»åï¼object</p>
									<p>å±æ§ç±»åï¼åèå±æ§è¯´æ</p>
								</td>
								<td>
									å¦æç»ä»¶å¨åå§åæ¶æ²¡æè®¾ç½®åæ°ï¼é£ä¹è¯¥æ¹æ³å¿é¡»å¨è°ç¨renderæ¹æ³åè°ç¨
									<p>ä¸¾ä¸ªæ å­ï¼</p>
									<p>
										<pre class="layui-code">
										//æ å­ä¸
										layui.config({
										    base:'js/'
										}).use('navbar',function(){
										    var navbar = layui.navbar({
										        elem: '#nav',
										        url: 'datas/nav.json'
										    });
										    //è¿æ¯è°ç¨navbarç»ä»¶åå§åçæåµï¼å¦æè®¾ç½®äºåæ°ï¼é£ä¹å¯ä»¥ç´æ¥ä½¿ç¨renderæ¹æ³æ¸²æ
										    navbar.render();
										    //Do something...
										});
										//æ å­äº
										layui.config({
										    base:'js/'
										}).use('navbar',function(){
										    var navbar = layui.navbar();
										    //navbarç»ä»¶æ²¡æè¢«åå§åçæåµï¼éè¦è°ç¨setæ¹æ³è®¾ç½®ä¸äºåæ°
										    navbar.set({
										        elem: '#nav',
										        url: 'datas/nav.json'
										    });
										    navbar.render();
										    //Do something...
										});
										</pre>
									</p>
								</td>
							</tr>
							<tr>
								<td style="text-align: center;">render</td>
								<td style="text-align: center;">
									æ 
								</td>
								<td>
									<p>æ¸²æåºnavbarå¯¼èªæ </p>
									<p>
										<pre class="layui-code">
										//è°ç¨ä¹åéè¦è®¾ç½®ä¸äºåæ°ï¼åèsetçæ¹æ³è¯´æ
										navbar.render();
										</pre>
									</p>
								</td>
							</tr>
							<tr>
								<td style="text-align: center;">cleanCached</td>
								<td style="text-align: center;">
									æ 
								</td>
								<td>
									<p>æ¸é¤ç¼å­</p>
									<p>
										<pre class="layui-code">
										//æ¸é¤ç¼å­æ¹å¼çå¶ä¸­ä¸ç§ï¼è¿æä¸ç§æ¯å°åæ°cachedè®¾ç½®ä¸ºfalseï¼ä¹ä¼èªå¨æ¸é¤ç¼å­
										//æ å­
										navbar.cleanCached();
										</pre>
									</p>
								</td>
							</tr>
							<tr>
								<td style="text-align: center;">on</td>
								<td style="text-align: center;">
									<p>åæ°ä¸ï¼events --- è¯´æï¼äºä»¶å -- ç±»åï¼String</p>
									<p>åæ°äºï¼callback --- è¯´æï¼æ¶è®¾å½æ° -- ç±»åï¼Function</p>
								</td>
								<td>
									<p>è°ç¨æ­¤æ¹æ³ç»å®äºä»¶ï¼å·ä½æ å­è¯·åè
										<a href="#event">äºä»¶</a>ææ¡£</p>
									<p>
										<pre class="layui-code">è¯­æ³ï¼navbar.on('event(è¿æ»¤å¨å¼)', callback);</pre>
									</p>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</fieldset>
			<fieldset class="layui-elem-field">
				<legend>æ°æ®ç»æ</legend>
				<div class="layui-field-box">
					<p>è¯·ä¸¥æ ¼æç§ä»¥ä¸æ°æ®ç»æè®¾ç½®æ°æ®</p>
					<pre class="layui-code">
						//æ°æ®ç»æ
						[
						    {
						        "title": "è¿æ¯å¨ææ¸²æç", //æ é¢
						        "icon": "&#x1002;",       //å¾æ ï¼æ¯ælayui-icon å font-awesome
						        "href": "",               //è·³è½¬çå°åï¼å¦ææå­èç¹ï¼è¯¥å°åå°æ æ
						        "spread":true,            //é»è®¤å±å¼
						        "children": [             //å­é¡¹ 
						            {
						                "title": "è¡¨å",
						                "icon": "&#xe62a;",
						                "href": "form.jsp"
						            }
						            //...
						        ]   
						    }, {
						        "title": "å°åæ¬",
						        "icon": "fa-address-book",
						        "href": "",
						        "spread":false,
						        "children": [
						            {
						                "title": "Github",
						                "icon": "fa-github",
						                "href": "https://www.github.com/"
						            },
						            {
						                "title": "QQ",
						                "icon": "fa-qq",
						                "href": "http://www.qq.com/"
						            },
						            {
						                "title": "Flyç¤¾åº",
						                "icon": "&#xe609;",
						                "href": "http://fly.layui.com/"
						            }
						            //...
						        ] 
						    }, {
						        "title": "33333",
						        "icon": "",
						        "href": "",		
						        "spread":false
						    }
						]
				</pre>
				</div>
			</fieldset>
		</div>
		<script type="text/javascript" src="plugins/layui/layui.js"></script>
		<script>
			layui.config({
				base: 'js/'
			}).use(['navbar', 'code'], function() {
				var navbar = layui.navbar(),
					layer = parent.layer === undefined ? layui.layer : parent.layer,
					$ = layui.jquery;
				layui.code();
				navbar.set({
					elem: '#nav',
					url: 'datas/nav.json',
					cached: true
				});
				navbar.render();
				navbar.on('click(demo)', function(data) {
					console.log(data.elem);
					console.log(data.field.title);
					console.log(data.field.icon);
					console.log(data.field.href);
					layer.msg(data.field.href);
				});
			});
		</script>
	</body>

</html>